<template>
  <div class="bbb">
    <a-layout>
      <a-layout-content style="margin: 20px; overflow-y: auto">
        <a-row>
          <a-col :span="12">
            <!-- 用户分析 -->
            <a-card title="用户活跃趋势" style="margin-bottom: 20px">
              <div ref="userChartRef" style="width: 100%; height: 300px"></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <!-- 留存分析 -->
            <a-card title="留存趋势" style="margin-bottom: 20px">
              <div
                ref="retentionChartRef"
                style="width: 100%; height: 300px"
              ></div>
            </a-card>
          </a-col>
        </a-row>
        <a-card title="留存明细">
          <a-table
            :columns="retentionColumns"
            :data="retentionData"
            row-key="date"
          />
        </a-card>

        <a-row>
          <a-col :span="12">
            <!-- 渠道分析 -->
            <a-card title="渠道用户占比" style="margin: 20px 0">
              <div
                ref="channelChartRef"
                style="width: 100%; height: 300px"
              ></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <!-- 渠道转化数据 -->
            <a-card title="渠道转化数据" style="margin: 20px 0">
              <a-table
                style="width: 100%; height: 300px"
                :columns="channelColumns"
                :data="channelData"
                row-key="channel"
              />
            </a-card>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <!-- 设备终端分析 -->
            <a-card title="设备类型分布" style="margin-bottom: 20px">
              <div
                ref="deviceChartRef"
                style="width: 100%; height: 300px"
              ></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <!-- 渠道转化数据 -->
            <a-card title="操作系统分布" style="margin-bottom: 20px">
              <div ref="osChartRef" style="width: 100%; height: 300px"></div>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';

  // 用户分析
  const userChartRef = ref(null);
  const userRegions = [
    { region: '北京', users: 3200 },
    { region: '上海', users: 2800 },
    { region: '广东', users: 4500 },
    { region: '四川', users: 2100 },
    { region: '浙江', users: 1900 },
  ];
  const regionColumns = [
    { title: '地区', dataIndex: 'region' },
    { title: '用户数', dataIndex: 'users' },
  ];

  // 留存分析
  const retentionChartRef = ref(null);
  const retentionData = [
    { date: '4月1日', newUsers: 300, day1: 150, day3: 90, day7: 30 },
    { date: '4月2日', newUsers: 400, day1: 220, day3: 120, day7: 50 },
    { date: '4月3日', newUsers: 500, day1: 280, day3: 170, day7: 90 },
  ];
  const retentionColumns = [
    { title: '注册日期', dataIndex: 'date' },
    { title: '新增用户', dataIndex: 'newUsers' },
    { title: '次日留存', dataIndex: 'day1' },
    { title: '3日留存', dataIndex: 'day3' },
    { title: '7日留存', dataIndex: 'day7' },
  ];

  // 渠道分析
  const channelChartRef = ref(null);
  const channelData = [
    { channel: 'App Store', visits: 5000, registrations: 3000 },
    { channel: '官网', visits: 4000, registrations: 2200 },
  ];
  const channelColumns = [
    { title: '渠道名称', dataIndex: 'channel' },
    { title: '访问数', dataIndex: 'visits' },
    { title: '注册数', dataIndex: 'registrations' },
  ];

  // 设备分析
  const deviceChartRef = ref(null);
  const osChartRef = ref(null);

  onMounted(() => {
    echarts.init(userChartRef.value).setOption({
      title: { text: '日活跃用户数' },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['4月1日', '4月2日', '4月3日', '4月4日', '4月5日'],
      },
      yAxis: { type: 'value' },
      series: [
        { name: '活跃用户', type: 'line', data: [120, 200, 150, 80, 70] },
      ],
    });

    echarts.init(retentionChartRef.value).setOption({
      title: { text: '留存率趋势' },
      tooltip: {},
      legend: { data: ['次日留存', '3日留存', '7日留存'] },
      xAxis: { type: 'category', data: retentionData.map((i) => i.date) },
      yAxis: { type: 'value' },
      series: [
        {
          name: '次日留存',
          type: 'line',
          data: retentionData.map((i) => i.day1),
        },
        {
          name: '3日留存',
          type: 'line',
          data: retentionData.map((i) => i.day3),
        },
        {
          name: '7日留存',
          type: 'line',
          data: retentionData.map((i) => i.day7),
        },
      ],
    });

    echarts.init(channelChartRef.value).setOption({
      title: { text: '渠道用户占比' },
      tooltip: { trigger: 'item' },
      series: [
        {
          type: 'pie',
          radius: '60%',
          data: channelData.map((i) => ({
            name: i.channel,
            value: i.registrations,
          })),
        },
      ],
    });

    echarts.init(deviceChartRef.value).setOption({
      title: { text: '设备类型分布' },
      xAxis: { type: 'category', data: ['手机', '平板', 'PC'] },
      yAxis: { type: 'value' },
      series: [{ data: [5000, 800, 2000], type: 'bar' }],
    });

    echarts.init(osChartRef.value).setOption({
      title: { text: '操作系统分布' },
      series: [
        {
          type: 'pie',
          radius: '60%',
          data: [
            { name: 'iOS', value: 3000 },
            { name: 'Android', value: 4500 },
            { name: 'Windows', value: 1500 },
          ],
        },
      ],
    });
  });
</script>

<style scoped>
  :deep(.arco-card-body) {
    padding: 20px;
  }
  .bbb {
    height: 100%;
    overflow-y: auto;
  }
</style>
